import React from 'react'
import Two from './component/two'
import './style.css'


class DataFlow extends React.Component{
    constructor(props){
        super(props)
        console.log('constructor');
    }
    state = {
        name: 'ydfd'
    }
    age = '16'
    UNSAFE_componentWillMount(){ // 渲染前的时刻,即 render前执行
        console.log('componentWillMount');  
    }
    componentDidMount(){ // 渲染后的时刻,即 render后执行
        console.log('componentDidMount')
    }
    UNSAFE_componentWillReceiveProps (){
        console.log('componentWillReceiveProps')
    }
    componentWillUnmount(){ // 组件的卸载
        console.log('componentWillUnmount')
    }
    // 组件自身的 state 更新了，那么会依次执行  shouldComponentUpdate 、 componentWillUpdate 、render 和  componentDidUpdate 。
    shouldComponentUpdate(){ // 是一个特别的方法,当方法返回  false 的时候，组件不再向下执行生命周期方法。
        console.log('shouldComponentUpdate')
        return true
    }
    UNSAFE_componentWillUpdate(){ // 更新过程中渲染前的时刻,不能在这里执行  setState
        console.log('componentWillUpdate');
    }
    componentDidUpdate(){ // 更新过程中渲染后的时刻
        console.log('componentDidUpdate');
    }
    click(){
        // this.age = 'change'
        this.setState({
            name: 'yuu'
        })
    }

    render(){
        console.log('顶级组件 render 方法')
        return (
            <div className="fatherBox">
                <h1>顶层组件</h1>
                    <p>{this.state.name}</p>
                <button onClick={this.click.bind(this)}>触发事件</button>
                <Two name="dhdifdi"></Two>
            </div>
        )
    }
}

export default DataFlow;